<template>
  <div class="main-container">
    <el-button type="primary" @click="addRole()" style="margin-bottom: 20px;">添加角色</el-button>
    <el-table :data="roleList" style="width: 100%; margin-bottom: 20px;" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column width="60"> </el-table-column>
      <el-table-column prop="id" label="ID" width="80" align="center"> </el-table-column>
      <el-table-column prop="title" label="角色名称" width="180"> </el-table-column>
      <el-table-column label="添加时间" align="center" width="150">
        <template slot-scope="scope">
          <div>
            {{ scope.row.add_time | timeFormat('yy-mm-dd hh:MM:ss') }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" align="center"> </el-table-column>
      <el-table-column prop="isshow" label="是否显示" align="center">
        <template slot-scope="scope">
          <div>
            <el-switch v-model="scope.row.isshow" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" @change="editRoleType(scope.row.id, scope.row.isshow)"> </el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <div>
            <span v-if="scope.row.children">
              <el-link type="primary" :underline="false" @click="addRole(scope.row.id)">添加下级</el-link>
              <el-divider direction="vertical"></el-divider>
            </span>
            <el-link type="primary" :underline="false" @click="editRole(scope.row.id)">编辑</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link type="primary" :underline="false" @click="remove(scope.row.id)">删除</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getRoleList, editRoleType } from '@/api/permission'
export default {
  data() {
    return {
      roleList: [],
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    async getRoleList() {
      const res = await getRoleList()
      if (res.status != 1) return this.$message.error(res.msg)
      // this.$message.success(res.msg)
      this.roleList = res.data
    },
    addRole(pid = 0) {
      this.$router.push({
        path: '/addRole',
        query: {
          pid,
        },
      })
    },
    editRole(id) {
      this.$router.push({
        path: '/editRole',
        query: {
          id,
        },
      })
    },
    remove(id) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.editRoleType(id, 3)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    async editRoleType(id, type) {
      const res = await editRoleType({
        id,
        type: type + '',
      })
      if (res.status != 1) return this.$message.error(res.msg)
      this.$message.success(res.msg)
      this.getRoleList()
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__row {
  height: 50px !important;
}
</style>
